<!-- 
  ThemeComponentClassic.vue is a part of Moosync.
  
  Copyright 2021-2022 by Sahil Gupte <sahilsachingupte@gmail.com>. All rights reserved.
  Licensed under the GNU General Public License. 
  
  See LICENSE in the project root for license information.
-->

<template>
  <svg viewBox="0 0 711 407" fill="none" xmlns="http://www.w3.org/2000/svg" @click="$emit('click', $event)"
    @contextmenu="$emit('contextmenu', $event)">
    <g filter="url(#filter0_d_1170_3334)">
      <rect x="6.0001" y="1.91123" :id="`bg_rect_${id}`" width="698.988" height="395.222" rx="13.0652"
        :fill="colors?.primary" :stroke="`${selected ? 'var(--accent)' : '#696969'}`" @click="emitColorClick('primary')"
        stroke-width="2.17753" />
      <path
        d="M7.08887 38.9293C7.08887 28.1057 15.8631 19.3315 26.6867 19.3315H134.475C152.514 19.3315 167.138 33.9552 167.138 51.9945V396.045H20.1541C12.9384 396.045 7.08887 390.195 7.08887 382.98V38.9293Z"
        :fill="`url(#paint0_linear_${id})`" />
      <rect x="192.179" y="82.48" width="465.992" height="63.1485" rx="7.93323" :fill="colors?.secondary"
        @click="emitColorClick('secondary')" />
      <rect x="196.622" y="87.2401" width="53.9459" height="53.9459" rx="7.93323" :fill="colors?.secondary"
        @click="emitColorClick('secondary')" />
      <path
        d="M236.048 99.6841C235.999 99.3908 235.888 99.1114 235.722 98.8647C235.556 98.618 235.339 98.4098 235.086 98.2541C234.833 98.0983 234.549 97.9987 234.254 97.962C233.959 97.9252 233.659 97.9521 233.375 98.0409L218.815 102.592C218.392 102.724 218.022 102.988 217.759 103.345C217.497 103.703 217.355 104.135 217.355 104.578V121.493C216.418 120.79 215.271 120.424 214.1 120.455C212.929 120.485 211.803 120.91 210.903 121.661C210.004 122.411 209.384 123.443 209.145 124.59C208.906 125.737 209.06 126.931 209.584 127.978C210.108 129.026 210.97 129.866 212.031 130.363C213.092 130.859 214.29 130.983 215.43 130.714C216.57 130.445 217.586 129.799 218.313 128.88C219.04 127.961 219.435 126.824 219.435 125.653V110.818L233.995 106.267V117.333C233.058 116.63 231.911 116.264 230.74 116.295C229.569 116.325 228.443 116.75 227.543 117.501C226.644 118.251 226.024 119.283 225.785 120.43C225.546 121.577 225.7 122.771 226.224 123.818C226.748 124.866 227.61 125.706 228.671 126.203C229.732 126.699 230.93 126.823 232.07 126.554C233.21 126.285 234.226 125.639 234.953 124.72C235.68 123.801 236.075 122.664 236.075 121.493V100.027C236.075 99.9108 236.065 99.7964 236.048 99.6841Z"
        fill="#656565" />
      <path
        d="M7.08887 358.889H702.811V377.369C702.811 387.575 694.537 395.849 684.331 395.849H19.0653C12.4509 395.849 7.08887 390.487 7.08887 383.873V358.889Z"
        @click="emitColorClick('textPrimary')" :fill="colors?.primary" />
      <path d="M674.354 379.041L677.983 375.417L681.612 379.041" :stroke="colors?.accent" stroke-width="0.72471"
        @click="emitColorClick('accent')" />
      <path d="M631.83 376.645L606.063 376.645" :stroke="colors?.accent" stroke-width="1.08707"
        @click="emitColorClick('accent')" />
      <path d="M655.783 376.645L630.015 376.645" :stroke="colors?.textSecondary" stroke-width="1.08707"
        @click="emitColorClick('textSecondary')" />
      <ellipse cx="631.748" cy="376.628" rx="3.33666" ry="3.33144" :fill="colors?.accent"
        @click="emitColorClick('accent')" />
      <path
        d="M667.707 374.388L667.272 374.755C667.719 375.286 667.958 375.961 667.943 376.655C667.928 377.349 667.66 378.013 667.189 378.523L667.608 378.922C668.173 378.31 668.495 377.512 668.513 376.679C668.531 375.847 668.245 375.036 667.707 374.399V374.388Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <path
        d="M666.118 375.504C666.387 375.823 666.53 376.228 666.52 376.645C666.511 377.061 666.35 377.46 666.067 377.766L666.486 378.153C666.862 377.745 667.077 377.213 667.089 376.657C667.101 376.102 666.91 375.561 666.551 375.137L666.118 375.504Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <path
        d="M665.099 380.631C665.061 380.631 665.024 380.623 664.989 380.608C664.954 380.594 664.923 380.572 664.897 380.545L662.726 378.352H660.827C660.751 378.352 660.679 378.322 660.625 378.269C660.572 378.216 660.542 378.143 660.542 378.068V375.22C660.542 375.144 660.572 375.072 660.625 375.018C660.679 374.965 660.751 374.935 660.827 374.935H662.726L664.897 372.742C664.95 372.689 665.022 372.659 665.097 372.659C665.173 372.659 665.245 372.689 665.298 372.742C665.352 372.794 665.382 372.866 665.384 372.941V380.346C665.384 380.421 665.354 380.494 665.3 380.547C665.247 380.601 665.174 380.631 665.099 380.631ZM661.112 377.783H662.843C662.881 377.783 662.918 377.791 662.953 377.805C662.988 377.82 663.019 377.841 663.045 377.868L664.814 379.654V373.633L663.045 375.419C663.019 375.446 662.988 375.467 662.953 375.482C662.918 375.497 662.881 375.504 662.843 375.504H661.112V377.783Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <rect x="7.08887" y="355.991" width="695.722" height="2.89884" :fill="colors?.tertiary"
        @click="emitColorClick('tertiary')" />
      <rect x="7.08887" y="355.991" width="309.21" height="2.89884" :fill="colors?.accent"
        @click="emitColorClick('accent')" />
      <ellipse cx="316.117" cy="357.621" rx="1.99607" ry="1.99295" :fill="colors?.textPrimary"
        @click="emitColorClick('textPrimary')" />
      <path
        d="M396.688 376.112C396.613 376.074 396.523 376.077 396.45 376.121C396.378 376.166 396.334 376.244 396.334 376.329V380.718C396.334 380.803 396.378 380.882 396.45 380.926C396.523 380.97 396.613 380.974 396.688 380.935L399.59 379.455V380.718C399.59 380.803 399.634 380.882 399.707 380.926C399.779 380.97 399.869 380.974 399.945 380.935L404.247 378.741C404.329 378.699 404.38 378.615 404.38 378.524C404.38 378.432 404.329 378.348 404.247 378.307L399.945 376.112C399.869 376.074 399.779 376.077 399.707 376.121C399.634 376.166 399.59 376.244 399.59 376.329V377.592L396.688 376.112Z"
        :stroke="colors?.accent" @click="emitColorClick('accent')" stroke-width="0.487656" stroke-linecap="round"
        stroke-linejoin="round" />
      <path
        d="M342.06 380.718V379.455L344.962 380.935C345.038 380.974 345.128 380.97 345.2 380.926C345.273 380.882 345.317 380.803 345.317 380.718V376.329C345.317 376.244 345.273 376.166 345.2 376.121C345.128 376.077 345.038 376.074 344.962 376.112L342.06 377.592V376.329C342.06 376.244 342.016 376.166 341.944 376.121C341.872 376.077 341.781 376.074 341.706 376.112L337.403 378.307C337.322 378.348 337.27 378.432 337.27 378.524C337.27 378.615 337.322 378.699 337.403 378.741L341.706 380.935C341.781 380.974 341.871 380.97 341.944 380.926C342.016 380.882 342.06 380.803 342.06 380.718Z"
        :stroke="colors?.accent" @click="emitColorClick('accent')" stroke-width="0.487656" stroke-linecap="round"
        stroke-linejoin="round" />
      <path
        d="M378.714 375.805C378.658 375.777 378.591 375.78 378.538 375.813C378.484 375.846 378.452 375.904 378.452 375.967V380.356C378.452 380.419 378.484 380.477 378.538 380.51C378.591 380.543 378.658 380.546 378.714 380.518L383.103 378.323C383.164 378.293 383.203 378.23 383.203 378.161C383.203 378.093 383.164 378.03 383.103 377.999L378.714 375.805Z"
        :fill="colors?.accent" :stroke="colors?.accent" @click="emitColorClick('accent')" stroke-width="0.362355"
        stroke-linecap="round" stroke-linejoin="round" />
      <circle cx="380.339" cy="378.162" r="7.07101" :stroke="colors?.accent" stroke-width="0.487656"
        @click="emitColorClick('accent')" />
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M421.146 374.435C421.172 374.409 421.203 374.388 421.237 374.374C421.271 374.36 421.307 374.353 421.344 374.353C421.381 374.353 421.418 374.36 421.452 374.374C421.486 374.388 421.517 374.409 421.543 374.435L422.948 375.84C422.974 375.866 422.994 375.897 423.009 375.931C423.023 375.965 423.03 376.002 423.03 376.038C423.03 376.075 423.023 376.112 423.009 376.146C422.994 376.18 422.974 376.211 422.948 376.237L421.543 377.642C421.49 377.694 421.419 377.724 421.344 377.724C421.27 377.724 421.198 377.694 421.146 377.642C421.093 377.589 421.063 377.517 421.063 377.443C421.063 377.368 421.093 377.297 421.146 377.244L422.352 376.038L421.146 374.833C421.119 374.807 421.099 374.776 421.084 374.742C421.07 374.708 421.063 374.671 421.063 374.634C421.063 374.597 421.07 374.561 421.084 374.527C421.099 374.492 421.119 374.461 421.146 374.435ZM421.146 378.929C421.172 378.903 421.203 378.882 421.237 378.868C421.271 378.854 421.307 378.847 421.344 378.847C421.381 378.847 421.418 378.854 421.452 378.868C421.486 378.882 421.517 378.903 421.543 378.929L422.948 380.333C422.974 380.359 422.994 380.39 423.009 380.425C423.023 380.459 423.03 380.495 423.03 380.532C423.03 380.569 423.023 380.606 423.009 380.64C422.994 380.674 422.974 380.705 422.948 380.731L421.543 382.135C421.49 382.188 421.419 382.218 421.344 382.218C421.27 382.218 421.198 382.188 421.146 382.135C421.093 382.083 421.063 382.011 421.063 381.937C421.063 381.862 421.093 381.79 421.146 381.738L422.352 380.532L421.146 379.327C421.119 379.301 421.099 379.27 421.084 379.236C421.07 379.201 421.063 379.165 421.063 379.128C421.063 379.091 421.07 379.054 421.084 379.02C421.099 378.986 421.119 378.955 421.146 378.929Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M414.042 376.038C414.042 375.964 414.072 375.893 414.124 375.84C414.177 375.787 414.248 375.758 414.323 375.758H415.446C417.161 375.758 418.01 377.026 418.736 378.131L418.781 378.201C419.138 378.745 419.468 379.248 419.866 379.627C420.269 380.01 420.73 380.251 421.344 380.251H422.468C422.542 380.251 422.614 380.281 422.666 380.334C422.719 380.386 422.749 380.458 422.749 380.532C422.749 380.607 422.719 380.678 422.666 380.731C422.614 380.784 422.542 380.813 422.468 380.813H421.344C420.555 380.813 419.962 380.493 419.479 380.033C419.032 379.609 418.669 379.055 418.325 378.529L418.266 378.439C417.517 377.298 416.821 376.319 415.446 376.319H414.323C414.248 376.319 414.177 376.29 414.124 376.237C414.072 376.184 414.042 376.113 414.042 376.038Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M414.042 380.532C414.042 380.607 414.072 380.678 414.124 380.731C414.177 380.784 414.248 380.813 414.323 380.813H415.446C417.161 380.813 418.01 379.545 418.736 378.439L418.781 378.37C419.138 377.825 419.468 377.323 419.866 376.944C420.269 376.561 420.73 376.319 421.344 376.319H422.468C422.542 376.319 422.614 376.29 422.666 376.237C422.719 376.184 422.749 376.113 422.749 376.038C422.749 375.964 422.719 375.893 422.666 375.84C422.614 375.787 422.542 375.758 422.468 375.758H421.344C420.555 375.758 419.962 376.078 419.479 376.537C419.032 376.961 418.669 377.516 418.325 378.042L418.266 378.131C417.517 379.273 416.821 380.251 415.446 380.251H414.323C414.248 380.251 414.177 380.281 414.124 380.334C414.072 380.386 414.042 380.458 414.042 380.532Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <path
        d="M363.134 376.154C363.553 376.593 363.837 377.144 363.953 377.74C364.068 378.336 364.01 378.953 363.785 379.517C363.56 380.081 363.178 380.569 362.684 380.922C362.19 381.276 361.605 381.479 360.998 381.51L360.84 381.514L358.23 381.513L359.14 382.424C359.206 382.489 359.246 382.576 359.255 382.668C359.263 382.761 359.239 382.853 359.186 382.929L359.14 382.984C359.075 383.05 358.988 383.09 358.896 383.099C358.803 383.107 358.711 383.083 358.635 383.03L358.58 382.984L356.993 381.397C356.927 381.332 356.887 381.245 356.879 381.153C356.87 381.06 356.895 380.968 356.948 380.891L356.993 380.837L358.58 379.25C358.65 379.18 358.743 379.138 358.842 379.134C358.941 379.129 359.038 379.162 359.115 379.225C359.191 379.289 359.24 379.378 359.253 379.476C359.267 379.575 359.243 379.674 359.186 379.756L359.14 379.811L358.23 380.72H360.84C361.447 380.72 362.03 380.489 362.472 380.073C362.913 379.657 363.179 379.088 363.214 378.483L363.218 378.343C363.219 377.717 362.973 377.116 362.532 376.671C362.46 376.598 362.419 376.5 362.418 376.397C362.417 376.294 362.456 376.195 362.526 376.12C362.597 376.045 362.694 376.001 362.797 375.997C362.9 375.993 363 376.028 363.077 376.097L363.134 376.154H363.134ZM359.877 373.656L359.932 373.701L361.518 375.288L361.564 375.344C361.61 375.41 361.634 375.488 361.634 375.569C361.634 375.649 361.61 375.728 361.564 375.794L361.518 375.849L359.932 377.436L359.877 377.481C359.81 377.527 359.732 377.552 359.652 377.552C359.571 377.552 359.493 377.527 359.426 377.481L359.371 377.436L359.326 377.38C359.28 377.314 359.256 377.235 359.256 377.155C359.256 377.075 359.28 376.996 359.326 376.93L359.371 376.874L360.281 375.965H357.67C357.063 375.965 356.48 376.197 356.038 376.613C355.597 377.029 355.331 377.598 355.296 378.204L355.292 378.343C355.292 378.993 355.553 379.581 355.974 380.011C356.041 380.087 356.076 380.186 356.072 380.287C356.068 380.389 356.026 380.485 355.953 380.555C355.881 380.626 355.784 380.667 355.683 380.668C355.581 380.67 355.483 380.633 355.408 380.564C354.98 380.128 354.688 379.578 354.565 378.979C354.442 378.381 354.495 377.759 354.718 377.19C354.94 376.621 355.322 376.128 355.817 375.771C356.313 375.414 356.901 375.207 357.511 375.176L357.67 375.173L360.281 375.172L359.371 374.263L359.326 374.207C359.274 374.131 359.25 374.039 359.258 373.947C359.267 373.855 359.307 373.768 359.373 373.703C359.438 373.638 359.524 373.597 359.616 373.589C359.708 373.58 359.8 373.604 359.877 373.656Z"
        :fill="colors?.accent" @click="emitColorClick('accent')" />
      <rect x="16.8877" y="369.764" width="21.3494" height="21.4011" rx="3.12984" :fill="colors?.secondary"
        @click="emitColorClick('textSecondary')" />
      <path
        d="M32.4904 374.7C32.471 374.584 32.427 374.473 32.3613 374.375C32.2956 374.277 32.2098 374.195 32.1095 374.133C32.0093 374.071 31.897 374.032 31.7802 374.017C31.6634 374.003 31.5449 374.013 31.4326 374.049L25.6704 375.854C25.5028 375.906 25.3564 376.011 25.2524 376.153C25.1485 376.295 25.0924 376.466 25.0925 376.642V383.352C24.7216 383.073 24.2677 382.928 23.8043 382.94C23.3408 382.952 22.895 383.121 22.5391 383.419C22.1832 383.717 21.938 384.126 21.8433 384.581C21.7485 385.036 21.8097 385.51 22.0171 385.925C22.2244 386.341 22.5656 386.674 22.9855 386.871C23.4054 387.068 23.8794 387.117 24.3306 387.01C24.7818 386.904 25.1838 386.647 25.4715 386.283C25.7592 385.918 25.9157 385.467 25.9157 385.003V379.118L31.6779 377.312V381.702C31.307 381.423 30.8531 381.278 30.3897 381.29C29.9262 381.302 29.4804 381.471 29.1245 381.768C28.7686 382.066 28.5234 382.476 28.4287 382.931C28.3339 383.386 28.3951 383.859 28.6025 384.275C28.8098 384.69 29.151 385.024 29.5709 385.221C29.9908 385.418 30.4648 385.467 30.916 385.36C31.3671 385.253 31.7692 384.997 32.0569 384.632C32.3446 384.268 32.5011 383.817 32.5011 383.352V374.837C32.5011 374.79 32.497 374.745 32.4904 374.7Z"
        fill="#656565" />
      <line x1="192.179" y1="173.649" x2="658.171" y2="173.649" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="192.179" y1="198.691" x2="658.171" y2="198.691" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="192.179" y1="220.466" x2="658.171" y2="220.466" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="192.179" y1="242.241" x2="658.171" y2="242.241" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="192.179" y1="264.017" x2="658.171" y2="264.017" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="192.179" y1="285.792" x2="658.171" y2="285.792" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="196.534" y1="307.567" x2="662.526" y2="307.568" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
      <line x1="196.534" y1="329.343" x2="662.526" y2="329.343" :stroke="colors?.textSecondary"
        @click="emitColorClick('textSecondary')" stroke-width="0.574485" />
    </g>
    <rect x="229" y="31" width="394" height="26" rx="13" :fill="colors?.secondary" @click="emitColorClick('secondary')" />
    <path fill-rule="evenodd" clip-rule="evenodd"
      d="M243.607 45.6861C244.863 44.4676 244.863 42.4921 243.607 41.2737C242.351 40.0553 240.314 40.0553 239.058 41.2737C237.801 42.4921 237.801 44.4676 239.058 45.6861C240.314 46.9045 242.351 46.9045 243.607 45.6861ZM244.365 40.5383C245.912 42.0386 246.03 44.3998 244.72 46.0318C244.728 46.0388 244.736 46.0461 244.744 46.0538L247.019 48.2599C247.228 48.463 247.228 48.7922 247.019 48.9953C246.809 49.1984 246.47 49.1984 246.261 48.9953L243.986 46.7891C243.978 46.7815 243.971 46.7737 243.963 46.7658C242.281 48.0365 239.846 47.9217 238.299 46.4214C236.624 44.7969 236.624 42.1629 238.299 40.5383C239.974 38.9137 242.69 38.9137 244.365 40.5383Z"
      :fill="colors?.accent" @click="emitColorClick('accent')" />
    <g clip-path="url(#clip0_1170_3334)">
      <path
        d="M636.628 48.6147C636.628 48.6147 636 48.6147 636 47.9873C636 47.36 636.628 45.4779 639.765 45.4779C642.901 45.4779 643.529 47.36 643.529 47.9873C643.529 48.6147 642.901 48.6147 642.901 48.6147H636.628ZM639.765 44.8506C640.264 44.8506 640.742 44.6523 641.095 44.2994C641.448 43.9464 641.647 43.4677 641.647 42.9686C641.647 42.4694 641.448 41.9907 641.095 41.6378C640.742 41.2848 640.264 41.0865 639.765 41.0865C639.265 41.0865 638.787 41.2848 638.434 41.6378C638.081 41.9907 637.883 42.4694 637.883 42.9686C637.883 43.4677 638.081 43.9464 638.434 44.2994C638.787 44.6523 639.265 44.8506 639.765 44.8506V44.8506Z"
        :fill="colors?.textPrimary" @click="emitColorClick('textPrimary')" />
    </g>
    <path d="M197.769 42.3731L197.141 41.7434L194 44.8921L197.141 48.0407L197.769 47.411L195.256 44.8921L197.769 42.3731Z"
      :fill="colors?.textPrimary" @click="emitColorClick('textPrimary')" />
    <path
      d="M210.099 42.3731L210.727 41.7434L213.868 44.8921L210.727 48.0408L210.099 47.411L212.611 44.8921L210.099 42.3731Z"
      :fill="colors?.textPrimary" @click="emitColorClick('textPrimary')" />
    <path
      d="M663.665 44.224C663.649 44.1368 663.612 44.0542 663.558 43.9821C663.504 43.9101 663.434 43.8504 663.353 43.8076L662.553 43.3837C662.502 43.2887 662.446 43.1961 662.386 43.1061L662.401 42.232C662.403 42.1436 662.384 42.0559 662.345 41.9753C662.307 41.8948 662.25 41.8235 662.179 41.7666C661.786 41.4502 661.337 41.203 660.853 41.0365C660.765 41.0063 660.672 40.995 660.58 41.0035C660.488 41.0121 660.398 41.0402 660.319 41.0859L659.534 41.5353C659.422 41.5303 659.31 41.5302 659.199 41.5351L658.413 41.0853C658.334 41.0396 658.245 41.0114 658.153 41.0028C658.06 40.9942 657.967 41.0054 657.88 41.0357C657.396 41.2028 656.947 41.4506 656.554 41.7675C656.483 41.8244 656.427 41.8958 656.388 41.9764C656.35 42.057 656.331 42.1448 656.332 42.2334L656.348 43.1066C656.287 43.1965 656.231 43.2891 656.18 43.384L655.379 43.8082C655.298 43.8511 655.228 43.9109 655.174 43.9831C655.12 44.0553 655.083 44.1381 655.067 44.2255C654.977 44.7085 654.978 45.203 655.068 45.6859C655.085 45.7732 655.121 45.8558 655.175 45.9279C655.229 45.9999 655.299 46.0596 655.38 46.1024L656.18 46.5263C656.232 46.6213 656.287 46.7139 656.348 46.8039L656.332 47.6779C656.331 47.7664 656.35 47.8541 656.388 47.9346C656.426 48.0152 656.483 48.0865 656.554 48.1434C656.947 48.4598 657.397 48.707 657.881 48.8735C657.968 48.9037 658.061 48.915 658.153 48.9064C658.246 48.8979 658.335 48.8697 658.414 48.824L659.199 48.3747C659.311 48.3798 659.423 48.3799 659.535 48.3749L660.32 48.8247C660.399 48.8704 660.488 48.8986 660.581 48.9072C660.673 48.9158 660.766 48.9046 660.853 48.8743C661.337 48.7072 661.786 48.4595 662.179 48.1426C662.25 48.0856 662.307 48.0142 662.345 47.9336C662.384 47.853 662.403 47.7652 662.401 47.6767L662.386 46.8034C662.446 46.7135 662.502 46.6209 662.554 46.526L663.354 46.1018C663.436 46.0588 663.506 45.9991 663.56 45.9269C663.614 45.8547 663.65 45.7719 663.666 45.6845C663.756 45.2015 663.756 44.707 663.665 44.2241V44.224ZM659.367 46.5921C659.027 46.5921 658.696 46.4961 658.414 46.3162C658.132 46.1363 657.912 45.8806 657.782 45.5815C657.652 45.2823 657.618 44.9532 657.684 44.6356C657.751 44.318 657.914 44.0263 658.154 43.7974C658.394 43.5684 658.699 43.4125 659.032 43.3493C659.365 43.2862 659.709 43.3186 660.023 43.4425C660.336 43.5664 660.604 43.7762 660.793 44.0455C660.981 44.3147 661.082 44.6312 661.082 44.955C661.081 45.389 660.9 45.8051 660.579 46.112C660.257 46.4189 659.821 46.5916 659.367 46.5921V46.5921Z"
      :fill="colors?.textPrimary" @click="emitColorClick('textPrimary')" />
    <defs>
      <filter id="filter0_d_1170_3334" x="0.556066" y="0.822449" width="709.876" height="406.11"
        filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha" />
        <feOffset dy="4.35507" />
        <feGaussianBlur stdDeviation="2.17753" />
        <feComposite in2="hardAlpha" operator="out" />
        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1170_3334" />
        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1170_3334" result="shape" />
      </filter>
      <linearGradient :id="`paint0_linear_${id}`" x1="7.08887" y1="26.1123" x2="65.9349" y2="410.052"
        gradientUnits="userSpaceOnUse">
        <stop :stop-color="colors?.secondary" />
        <stop offset="0.718063" :stop-color="colors?.primary" />
      </linearGradient>
      <clipPath id="clip0_1170_3334">
        <rect width="7.52811" height="7.52811" :fill="colors?.textPrimary" transform="translate(636 41.0865)" />
      </clipPath>
    </defs>
  </svg>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-facing-decorator'

@Component({
  components: {},
  emits: ['colorClick', 'click', 'contextmenu']
})
export default class ThemeComponentClassic extends Vue {
  @Prop({ default: 'theme' })
  id!: string

  @Prop({ default: () => null })
  colors!: ThemeItem | null

  @Prop({ default: false })
  selected!: boolean

  emitColorClick(type: keyof ThemeItem) {
    this.$emit('colorClick', type)
  }
}
</script>

<style scoped lang="sass">
svg
  cursor: pointer
</style>
